<template>
    <mt-popup  @touchmove.prevent class="consume-popup" popup-transition="popup-fade" :modal=true v-model="isShow">
        <div class="popup-close">
            <i class="iconfont icon-close" @click="hidePopup"></i>
        </div>
        <div class="ok-icon">
            <i class="iconfont icon-chenggong"></i>
        </div>
        <div class="tips">
            <p class="consume-tip">消费成功</p>
        </div>
        <mt-button size="small" class="sure" type="default" @click="hidePopup">确定</mt-button>
    </mt-popup>
</template>

<script>
import { mapState } from "vuex";
import Vue from "vue";
import { Popup, Button } from "mint-ui";
import "mint-ui/lib/button/style.css";
import "mint-ui/lib/popup/style.css";
Vue.component(Button.name, Button);
Vue.component(Popup.name, Popup);

export default {
  name: "consume-ok-popup",
  components: {},
  created() {},
  methods: {
    hidePopup(event) {
      this.changeRouterHandle();
      this.$store.commit("UPDATE_CONSUMEOKSHOW", false);
    },
    changeRouterHandle() {
      if (this.consumeOkPopupShow == false) return;
      let curPath=this.$route.name;
      if (curPath == "mealTicketList"||curPath=="boughtList") {
        this.$router.replace({name: "refreshPage",params: { "nextPath": this.$route.path }});
      } else if (curPath == "ticketQcode") {
        this.$router.go(-1);
      }
    }
  },
  computed: {
    ...mapState(["consumeOkPopupShow"]),
    isShow: {
      get: function() {
        return this.consumeOkPopupShow;
      },
      set: function(boo) {
        if (boo == false) this.changeRouterHandle();
        this.$store.commit("UPDATE_CONSUMEOKSHOW", boo);
      }
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.consume-popup {
    width: 88%;
    border-radius: 8px;
    text-align: center;

    .popup-close {
        text-align: right;

        .iconfont {
            color: #acacac;
            font-size: 26px;
            line-height: 26px;
            font-weight: 700;
            margin: 8px 8px 5px 0;
            display: inline-block;
        }
    }

    .ok-icon {
        .iconfont {
            color: #f2a5ba;
            font-size: 54px;
            line-height: 54px;
            font-weight: 500;
            display: inline-block;
        }
    }

    .tips {
        margin: 12px 0px 20px 0px;
    }

    p {
        color: #f2a5ba;
        font-size: 17px;
        line-height: 18px;
        font-weight: 500;
        letter-spacing 1px;
    }

    .sure {
        width: 40%;
        height: 32px;
        box-shadow: none;
        margin-bottom: 25px;
        color: #fff;
        background-color #f2a5ba;
        opacity 0.9;
        letter-spacing 3px;
        font-size 15px;
    }
}
</style>
